<script setup lang="ts">
import { Tabs } from '@ark-ui/vue/tabs';
import Recommend from './Recommend.vue';
import News from './News.vue';
import Repository from './Repository.vue';
import Organization from './Organization.vue';

import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const types = [
  {
    name: t('home.content.title1'),
    value: 'recommend',
    components: Recommend,
  },
  {
    name: t('home.content.title2'),
    value: 'news',
    components: News,
  },
  {
    name: t('home.content.title3'),
    value: 'repository',
    components: Repository,
  },
  {
    name: t('home.content.title4'),
    value: 'organization',
    components: Organization,
  },
]
</script>

<template>
  <Tabs.Root default-value="recommend" id="page-home-template2-content">
    <Tabs.List class="h-32 px-16">
      <Tabs.Trigger v-for="item in types" :key="item.value" :value="item.value" class="mr-42 min-w-32 bg-hex-fff text-16 text-hex-adadad font-400 leading-22">
        {{ item.name }}
      </Tabs.Trigger>
      <Tabs.Indicator class="mt-7 h-2 w-[var(--width)] rounded-2 bg-hex-292929" />
    </Tabs.List>
    <div class="h-1 bg-hex-e3e3e3"></div>
    <Tabs.Content v-for="item in types" :key="item.value" :value="item.value">
      <component :is="item.components" :key="item.value" />
    </Tabs.Content>
  </Tabs.Root>
</template>

<style lang="scss" scoped>
[data-scope=tabs][data-part=trigger]:hover {
  color: #1f1f1f;
}

[data-scope=tabs][data-part=trigger][data-selected] {
  color: #1f1f1f;
}
</style>
